<template>
	<view class="page">
		<p class="one">欢迎使用~</p>
		<p class="two">用户注册</p>
		<view class="register-form">
			<view class="form-item">
				<view class="from-title">
					<span class="iconfont icon-shouji"></span>手机号
				</view>
				<input type="text" id="i1" placeholder="请输入手机号" maxlength="11" v-model="phoneNum" auto-focus>
			</view>
			<view class="form-item">
				<view class="from-title">
					<span class="iconfont icon-mima"></span>密码
				</view>
				<input type="password" id="i1" placeholder="请输入密码" maxlength="11" v-model="password">
			</view>
			<view class="form-item">
				<view class="from-title">
					<span class="iconfont icon-mima"></span>确认密码
				</view>
				<input type="password" id="i1" placeholder="请确认密码" maxlength="11" v-model="confirmPassword">
			</view>
		        

		</view>
		       
		<view class="register-btn" @click="registerForm">
			注册
		</view>
		<!-- <input type="button" value="注册"/> -->
<!-- 		<a href="login.vue"><button class="button" ><span class="ys">注册</span></button></a> -->
	</view>
</template>

<script>
	import {registration} from "../../api/index.js"
		export default {
			data() {
				return {
					phoneNum:'',
					password:'',
					confirmPassword:''
				}
			},
			methods: {
				// 提交注册
				registerForm(){
					// 组合数据
					let obj = {
						phoneNum:this.phoneNum,
						password:this.password
					}
					console.log(obj);
					// 判断输入的是否为空
					if(!this.phoneNum.trim() || !this.password.trim() || !this.confirmPassword.trim()){
						uni.showToast({
							title:"不能为空"
						})
						return
					}
					// 判断密码和确认密码是否一致
					if(this.password === this.confirmPassword) {
						registration(obj).then(res=>{
							if(res.data.status === 0) {
								uni.showToast({
									title:"注册成功"
								})
								setTimeout(()=>{
									// 跳转到登录页面
									uni.navigateTo({
										url:"/pages/login/login"
									})
								},800)
							} else {
								uni.showToast({
									title:"注册失败"
								})
							}
						})
					} else {
						uni.showToast({
							title:"密码不一致"
						})
					}
				}
			}
		}
</script>

<style lang="scss" scoped>
.page{
	background: linear-gradient(#b2cfed,#ffffff);
	width: 100%;
	height: 100vh;
	.one{
		font-size: 36rpx;
		font-weight: bold;
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		// background-color: pink;
		padding-left: 15rpx;
		margin-bottom: 20px;
		}
	.two{
		font-size: 34rpx;
		font-weight: bold;
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 15rpx;
		// margin: 50rpx 0 50rpx 0; 
	}
	.register-form{
		width: 85%;
		height: 500rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		// margin: 80rpx 0;
		margin: 20px auto;
		.form-item{
			height: 100rpx;
			margin-bottom: 30px;

			.from-title{
				margin-bottom: 10rpx;
				// margin-bottom: 20rpx 0;
				.iconfont{
					color: #9294e3;
					font-size: 36rpx;
				}
			}
			input{
				padding-left: 5rpx;
				border-bottom: 1px solid rgb(237, 240, 244);
			}
		}
	}
	.register-btn{
		width: 85%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: rgb(167, 197, 251);
		margin: 80rpx auto 0;
		border-radius: 40rpx;
		color:#fff;
	}
	
}
// #i1,#i2,#i3{
// 	padding: 10px 10px;
// 	border-bottom: 2px solid rgb(237, 240, 244);
// }
// .ys{
// 	color: #ffffff;
// }
// .button{
// 	width: 90%; 
// 	height: 40px; 
// 	margin-top: 20px; 
// 	background-color: rgb(167, 197, 251);
// 	// android:radius;
// 	border-radius: 20px; 
// }
</style>
